<template>
  <div class="home">
    <p class="title">Home</p>
		<p>{{ $t('title') }}</p>
		<p>{{ time | timeFormat }}</p>
		<p v-color="'orange'">{{ str | random }}</p>
		<p v-color:red>{{ str | random }}</p>
		<p v-formatNumber="'-'">12345678945613</p>
		<p>{{ 12345678945613 | formatNumber('*') }}</p>
		<Page></Page>
		<!-- 切换语言 -->
		<select v-model="locale" @change="commandChange">
			<option 
				v-for="val in lang"
				:key="val.id"
				:value="val.name">{{ val.content }}</option>
		</select>
  </div>
</template>

<script>
export default {
  name: 'Home',
	data() {
		return {
			lang: [
				{id: 1, name: 'zh', content: '简体中文'},
				{id: 2, name: 'en', content: 'English'},
			],
			locale: 'zh',
			local: '1',
			time: 1223864813433,
			str: 'abcd',
		}
	},
	mounted() {
		this.say();
	},
	methods: {
		commandChange() {
			this.locale = this.locale;
			this.$i18n.locale = this.locale;
		}
	},
}
</script>

<style scoped lang="scss">
.home {
	.title {
		color: $main-color;
	}
}
</style>